<template>
	<view class="chat-wrap">
		<scroll-view id="scrollView" scroll-y :scroll-top="scrollTop" :scroll-with-animation="true" :style="{height:slideHeight+'px'}">
			<!--聊天内容列表 -->
			<block v-for="(item,index) in chats" :key="index">
				<view class="chat-item">
					<ChatList :item="item"></ChatList>
				</view>
			</block>
		</scroll-view>
		<!-- 底部发言 -->
		<ChatMessage @submit="submit"></ChatMessage>
	</view>
</template>

<script>
// 引入格式化时间
import time from '@/static/js/time.js';
import ChatMessage from '@/components/chat-message';
import ChatList from '@/components/chat-list/chat-list';
export default {
	components: {
		ChatMessage,
		ChatList
	},
	data() {
		return {
			chats: [],
			scrollTop:0,
			// 滚动的高度
			slideHeight:0,
			// 总高度
			itemH:0
		};
	},
	onLoad() {
		this.getChats();
		this.initData()
	},
	onReady() {
		this.scrollTopNum()
	},
	methods: {
		// 计算scrollTop
		scrollTopNum(){
			const query = uni.createSelectorQuery()
			query.select('#scrollView').boundingClientRect()
			query.selectAll('.chat-item').boundingClientRect()
			query.exec((res)=>{
				res[1].forEach((ret)=>{
					this.itemH+=ret.height
				})
				if(this.itemH>this.slideHeight){
					this.scrollTop=this.itemH
				}
			})
		
		},
		// 获取浏览器吗窗口
		initData(){
			try {
			    const res = uni.getSystemInfoSync();
			   let hight = res.windowHeight-uni.upx2px(160)
			   this.slideHeight=hight
			} catch (e) {
			    // error
				console.log(E)
			}
		},
		submit(data) {
			let now = new Date().getTime();
			let obj = {
				isme: true,
				userpic: '../../static/demo/userpic/10.jpg',
				type: 'text',
				data: data,
				time: now,
				gstime: time.gettime.getChatTime(now, this.chats[this.chats.length - 1].time)
			};
			this.chats.push(obj);
			this.scrollTopNum()
		},
		getChats() {
			let arr = [
				{
					isme: false,
					userpic: '../../static/demo/userpic/11.jpg',
					type: 'text',
					data: '哈哈哈',
					time: '1555146412'
				},
				{
					isme: true,
					userpic: '../../static/demo/userpic/10.jpg',
					type: 'img',
					data: '../../static/demo/3.jpg',
					time: '1556746414'
				},
				{
					isme: false,
					userpic: '../../static/demo/userpic/11.jpg',
					type: 'text',
					data: '哈哈哈',
					time: '1555146412'
				},
				{
					isme: true,
					userpic: '../../static/demo/userpic/10.jpg',
					type: 'img',
					data: '../../static/demo/3.jpg',
					time: '1585146414'
				},
				{
					isme: false,
					userpic: '../../static/demo/userpic/11.jpg',
					type: 'text',
					data: '哈哈哈',
					time: '1555146412'
				},
				{
					isme: true,
					userpic: '../../static/demo/userpic/10.jpg',
					type: 'img',
					data: '../../static/demo/3.jpg',
					time: '1555146514'
				},
				{
					isme: false,
					userpic: '../../static/demo/userpic/11.jpg',
					type: 'text',
					data: '哈哈哈',
					time: '1555146412'
				},
				{
					isme: true,
					userpic: '../../static/demo/userpic/10.jpg',
					type: 'img',
					data: '../../static/demo/3.jpg',
					time: '1555146414'
				}
			];
			for (let i = 0; i < arr.length; i++) {
				arr[i].getstime = time.gettime.getChatTime(arr[i].time, i > 0 ? arr[i - 1].time : 0);
			}
			this.chats = arr;
		}
	}
};
</script>

<style lang="less" scoped>
	#scrollView{
		padding-bottom: 180rpx;
	}
</style>
